<template>
  <!-- 问题分类页面 -->
  <div
    class="question-lib-box w100 bc2 border-none"
    @click="fnToLibPage(state.id)"
  >
    <div class="w100 sc-display">
      <img
        class="lib-img"
        :src="state.img[Math.floor(Math.random() * state.img.length)]"
      />
      <!-- 类型说明 -->
    </div>
    <QuestionType :msg="state.title" />
    <!-- 分割线 -->
    <Line :msg="{ width: '70%' }" />
    <!-- 描述信息 -->
    <QuestionDescribe :msg="state.describe" />
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import Line from "../Line/Line.vue";
import QuestionType from "../../Text/QuestionType/QuestionType.vue";
import QuestionDescribe from "../../Text/QuestionDescribe/QuestionDescribe.vue";
import { localStore, localData } from "/@/http/store.js";
import img0 from "./lib/0.png";
import img1 from "./lib/1.png";
import img2 from "./lib/2.png";
import img3 from "./lib/3.png";
import img4 from "./lib/4.png";
import img5 from "./lib/5.png";
import img6 from "./lib/6.png";
import img7 from "./lib/7.png";
import img8 from "./lib/8.png";
import img9 from "./lib/9.png";

export default {
  // 子组件
  components: {
    Line,
    QuestionType,
    QuestionDescribe,
  },
  // 父组件传值
  props: {
    msg: Object,
  },
  // 事件抛出组
  emits: ["route-lib"],
  // 钩子
  setup(props, { emit }) {
    // 路由跳转
    const { push } = useRouter();
    // 双向绑定数据
    const state = reactive({
      title: { text: props.msg.title },
      describe: { text: props.msg.describe },
      id: props.msg.id,
      img: [img0, img1, img2, img3, img4, img5, img6, img7, img8, img9],
    });
    // 路由到问题库
    const fnToLibPage = (val) => {
      push("/qlib/" + val);
      localStore("qlib", val); // 本地存储问题库ID
      emit("route-lib", { msg: "", code: "qlib", from: "Qlib" });
    };
    // 传入模板
    return { state, fnToLibPage };
  },
};
</script>

<style scoped>
.question-lib-box {
  padding: 20px;
  margin-top: 30px;
  cursor: pointer;
}
.question-lib-box:hover {
  background-color: rgba(29, 96, 151, 0.45);
}

.lib-img {
  width: 80px;
  height: 80px;
}
</style>
